<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- React核心包 最先引入  提供一个对象React -->
  <script src="../../react资料_stu/依赖包/react.development.js"></script>
  <!-- ReactDOM包  提供一个对象ReactDOM -->
  <script src="../../react资料_stu/依赖包/react-dom.development.js"></script>
  <!-- babel -->
  <script src="../../react资料_stu/依赖包/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    /* 
      当表单的value受state控制，则我们称作为受控表单
        - 受控表单三种用法
          1. 表单的初始值受控 直接书写defaultValue属性
          2. 表单是只读表单(设置了readOnly={true}) 直接设置value也是可以的
          3. 数据双向绑定:表单通过value受控,然后需要绑定onChange事件,事件中获取当前表单的值修改state
    
    */
    class App extends React.Component {
      //state改变 组件状态改变 重新渲染
      //双向绑定
      //表单要有state的数据
      //value
      /* 
      react-dom.development.js:73 Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`
      */
      //  受控表单
      //defaultValue  defaultValue默认 表单的初始值受限
      //readOnly 只读 表单是只读表单
      // 数据双向绑定  表单受value控制 然后需要绑定onChange事件,事件中获取当前表单的值修改state
      // onChange事件
      // 写一个回调函数 参数 e 是合成事件 e身上有target e.target 可以获取到dom元素
      //实现原理 给输入框绑定 value属性 受 state属性控制 在绑定 onChange事件 并给 它的 组件实列扩展 响应的方法 在方法中 e.target获取DOM元素 的值 使用setState 方法合并state对象 改变了state状态 重新渲染
      state = {
        name: "laowang",
        age: 18,
        hobby: "吃饭"
      }
      render() {
        const { name, age, hobby } = this.state;
        return (
          <div>
            姓名: <input type="text" value={name} onChange={this.changeName} />
            <br />
            年龄: <input type="text" value={age} onChange={this.changeAge} />
            <br />
            爱好: <input type="text" value={hobby} onChange={this.changeHobby} />
            <br />
            <button onClick={this.handle}>提交</button>
          </div>
        )
      }
      changeName = (e) => {
        //当前组件实列
        // arget：事件触发的真实元素
        // currentTarget ：事件绑定的元素
        console.log(this);
        //e 是React合成事件
        //e 他身上有一个target 属性 
        //可以用来操作DOM元素
        console.log(e);


        let { value } = e.target

        this.setState({ name: value })

      }

      changeAge = (e) => {
        let { value } = e.target
        this.setState({ age: value })
      }

      changeHobby = (e) => {
        let { value } = e.target
        this.setState({ hobby: value })
      }

      //收集表单数据
      handle = ()=>{
      const{name,age,hobby} = this.state
        console.log(name,age,hobby);
      }






    }



    const root = ReactDOM.createRoot(document.getElementById('app'));
    root.render(<App />)

  </script>
</body>

</html>